<!--点赞星星-->
<!--
<template>

  <div id="shoplist">

    <p class="all">

      <input
        type="radio"
        name="b"
        value="0" v-model="inputdata"/>

      <span>★</span>

      <input
        type="radio"
        name="b"
        value="1" v-model="inputdata"/>

      <span>★</span>

      <input
        type="radio"
        name="b"
        value="2" v-model="inputdata"/>

      <span>★</span>

      <input
        type="radio"
        name="b"
        value="3" v-model="inputdata"/>

      <span>★</span>

      <input
        type="radio"
        name="b"
        value="4" v-model="inputdata"/>

      <span>★</span>

      <input
        type="radio"
        name="b"
        value="5" v-model="inputdata"/>
      <span>★</span>

    </p>

  </div>

</template>

<script>

  export default {

    name: 'shoplist',

    data() {
      return {
//        初始选择的星星数
        inputdata: '0'
      }
    },
    mounted() {
    },
    methods: {},
    watch: {
      inputdata(value) {
        if (value == 1) {
          let values = value
          alert(values)
        }
        else if (value == 2) {
          alert('二星好评')
        }
        else if (value == 3) {
          alert('三星好评')
        }
        else if (value == 4) {
          alert('四星好评')
        } else {
          alert('五星好评')
        }
        // console.log(value)
      }
    }
  }

</script>

<style>
  #shoplist {
    width: 100%;
    float: left;
  }

  .all > input {
    opacity: 0;
    position: absolute;
    width: 2em;
    height: 2em;
    margin: 0;
  }

  .all > input:nth-of-type(1),
  .all > span:nth-of-type(1) {
    display: none;
  }

  /*所有星星的样式*/
  .all > span {
    font-size: 3em;
    color: orangered;

    -webkit-transition: color .2s;

    transition: color .2s;

  }

  /*未选择时的颜色状态*/
  .all > input:checked ~ span {
    color: #d7d7d7;
  }

  /*选择时的颜色状态*/
  .all > input:checked + span {
    color: orangered;
  }

  #images {
    display: block;
    width: 70px;
    height: 70px;
    border: 2px solid #000;
    background: url("./image/fabu@3x.png") no-repeat;
    background-size: 100% 100%;
  }

  #images .inputStyle {
    /*width: 70px;*/
    height: 70px;
    opacity: 0
  }
</style>
-->
<template>
  <div class="home3">
    <ul class="ul_one">
      <li>
        <div class="li_li">
          <p>真实姓名：</p>
          <input type="text">
        </div>
      </li>
      <li>
        <div class="li_li">
          <p>我的昵称：</p>
          <input type="text" placeholder="请输入昵称">
        </div>
      </li>
    </ul>
    <div class="textarea" contenteditable="true" placeholder="请输入个人简介"></div>
    <div id="publish">
      <!-- 发布内容输入框，利用Html5的新属性contenteditable，实现可编辑文本 ，会自动将插入的IMG标签解析-->
      <div class="publish_container">
        <p contenteditable="true" id="input_conta"></p>
      </div>

      <!-- 表情和发送-->
      <div class="face_container">
        <!-- 表情Icon，点击触发事件，动态生成表情并显示 -->
        <span @click=make_face() class="make_face"><i class="icon-emoji"></i></span>
        <span class="make_img" @click="add_img()"><i class="icon-Pictuer"></i></span>
        <span class="send" @click=send()>发送</span>
        <span class="send"><input type="checkbox" name="top" id="top" value="top">本条置顶</span>
        <!-- 表情容器 ，包裹生成的表情，绑定点击表情事件-->
        <div id="face" @click=choice_face($event)></div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'home3',
    data() {
      return {
        id: this.$route.query.id,
        top: "",
      }
    },
    methods: {
      make_face: function () {
        $("div#face").show();         //显示表情容器
        if ($("div#face>img").length == 0) {     //动态生成表情，如果现在没有表情则生成
          for (var i = 1; i <= 75; i++) {      //根据表情文件数量决定循环次数，这里为75个表情
            $("div#face").append('<img src="/static/arclist/' + i + '.gif">'); //为表情容器里添加IMG标签，并赋予src值，路径为表情文件所在路径
          }
        }
      },// 选择表情并插入到输入框
      choice_face: function (e) {
        if (e.target.nodeName == "IMG") {
          var choice = e.target;
          var cEle = choice.cloneNode(true); //深度复制，复制节点下面所有的子节点 ，直接将整个表情的IMG标签复制，并添加到发布框的<p></p>里面
          $("p#input_conta").append(cEle);
        }
      },
      // 发送信息给后台
      send: function () {
        // 发送留言
        var text = $("#input_conta").html();  //获得发布框的文本内容，表情会以整个img标签文本显示
        console.log(text);
        $("#input_conta").html("");  //清除发布框的文本内容
        $("div#face").hide();      //隐藏表情选择// 上传图片并发送给后台
        var out_this = this;
        $("#addTextForm").ajaxSubmit({
          url: url + "/index/text/add",
          type: "post",
          data: {
            'i_text': text,
          },
          success: function (data) {
            console.info(data);
          }
        });
      }
    }
  }
</script>

<style lang="scss">
  .home3 {
    width: 100%;
    .ul_one {
      width: 100%;
      li {
        width: 100%;
        background: rgba(2, 2, 3, 0.1);
        border-bottom: 1px solid #d7d7d7;
        .li_li {
          width: 100%;
          line-height: 44px;
          display: inline-flex;
          align-items: center;
          p {
            font-size: 15px;
            float: left;
            margin-left: 10px;
          }
          input {
            font-size: 14px;
            outline: none;
            border: none;
          }
        }
      }
    }
    .textarea {
      width: 100%;
      height: 100px;
      border: 1px solid #d7d7d7;
      outline: none;
    }
    .textarea:empty::before {
      color: lightgrey;
      content: attr(placeholder);
    }
  }
</style>
